<template>
  <div id="app">
    <el-table :data="contentList" style="width: 100%">
      <!-- ID Column -->
      <el-table-column label="ID" prop="id"></el-table-column>

      <!-- Title Column -->
      <el-table-column label="标题" prop="title"></el-table-column>

      <!-- URL Column -->
      <el-table-column label="链接" prop="url"></el-table-column>

      <!-- Image Column -->
      <el-table-column label="图片">
        <template #default="{ row }">
          <!-- Conditional image rendering -->
          <img v-if="row.pic" :src="row.pic" alt="pic" width="50" />
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>

      <!-- Status Column -->
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>

      <!-- Sort Order Column -->
      <el-table-column label="排序" prop="sortOrder"></el-table-column>

      <!-- Actions Column -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="editContent(row)" size="mini">编辑</el-button>
          <el-button @click="confirmDeleteContent(row.id)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Pagination Section -->
    <div class="pagination-wrapper">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </div>

    <!-- Content Edit Dialog -->
    <el-dialog :visible.sync="dialogVisible" title="内容编辑">
      <el-form :model="form" ref="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title" />
        </el-form-item>

        <el-form-item label="链接">
          <el-input v-model="form.url" />
        </el-form-item>

        <el-form-item label="图片">
          <el-upload
              action="/common/upload"
              :headers="uploadHeaders"
              :on-success="handleImageUploadSuccess"
              :show-file-list="false"
              :auto-upload="true"
          >
            <el-button>上传图片</el-button>
          </el-upload>
          <span v-if="form.pic" class="pic-preview">
            <img :src="form.pic" alt="Uploaded Image" width="50" />
          </span>
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="form.sortOrder" :min="1" :max="100" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveContent">保存</el-button>
      </span>
    </el-dialog>

    <!-- Delete Confirmation Dialog -->
    <el-dialog :visible.sync="deleteDialogVisible" title="确认删除">
      <p>确定要删除这条内容吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="deleteContent">确认删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentList: [], // Data for the content
      page: 1, // Current page
      pageSize: 10, // Number of items per page
      total: 0, // Total count of items
      dialogVisible: false, // Controls visibility of the edit dialog
      deleteDialogVisible: false, // Controls visibility of the delete confirmation dialog
      form: {
        title: '',
        url: '',
        pic: '',
        status: 1,
        sortOrder: 1
      },
      uploadHeaders: {
        'Authorization': 'Bearer token' // Add authorization if required
      }
    };
  },
  methods: {
    // Example of how you might handle saving the content
    saveContent() {
      // Call API to save content
      console.log(this.form);
      this.dialogVisible = false;
    },
    // Example of how you might handle content deletion
    confirmDeleteContent(id) {
      this.deleteDialogVisible = true;
    },
    deleteContent() {
      // Call API to delete content
      console.log("Deleting content");
      this.deleteDialogVisible = false;
    },
    // Example image upload success handler
    handleImageUploadSuccess(response, file, fileList) {
      // Update the form with the uploaded image URL
      this.form.pic = response.url; // Assuming the response has a `url` key
    },
    // Pagination handling methods
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.page = page;
    },
    // Example of editing content
    editContent(row) {
      this.form = { ...row }; // Populate form with selected row data
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
.pagination-wrapper {
  margin-top: 20px;
  text-align: center;
}

.pic-preview img {
  margin-top: 10px;
  max-width: 50px;
  max-height: 50px;
}
</style>
